<template>
  <div id='boder' :style='size'>
    <div class="mainboders">
      <img class="topleft" v-bind:src="topleft">
      <img class="bottomright" v-bind:src="topleft">
      <div class="inboders">
        <slot name="header"></slot>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'boder',
    data () {
      return {
        size: {
          width: '100%',
          height: '100%'
        },
        topleft: require('../img/topleft.png')
      }
    },
    computed: {},
    mounted () {
    }
  }
</script>
<style>
  .mainboders {
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    position: relative;
    border:1px solid #081d38;
  }
  .topleft{
    position: absolute;
    width: 12px;
    height: auto;
    z-index: 2;
    top:0px;
    left: 0px;
  }
  .bottomright{
    position: absolute;
    width: 12px;
    height: auto;
    z-index: 2;
    bottom: 0px;
    right: 0px;
    transform: rotate(180deg);
    ms-transform: rotate(180deg); /* IE 9 */
    moz-transform: rotate(180deg); /* Firefox */
    webkit-transform: rotate(180deg); /* Safari and Chrome */
    o-transform: rotate(180deg); /* Opera */
  }
  .inboders{
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    border:1px solid #081d38;
    /*opacity:0.5;*/
    /*-moz-opacity:0.5;*/
    /*filter:alpha(opacity=50);*/
    background-color:rgba(0,0,0,0.3);
    /*background: black;*/
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
